<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <NSpace>
              <NForm
                ref="formRef"
                :model="formValue"
                :rules="rules"
                label-placement="left"
                :label-width="150"
                label-align="right"
                require-mark-placement="left"
              >
              <NSpace>
                <NFormItem
                  label="层级类型:"
                  path="provideId1"
                >
                  <NSelect
                    :options="listOption1"
                    v-model:value="form.provideId1"
                    placeholder="请选择位置"
                    clearable
                    style="width: 135px; margin-right: 8px"
                    @update-value="queryListOption2"
                  />
                  <NSelect
                    :options="listOption2"
                    v-model:value="form.provideId2"
                    placeholder="请选择位置"
                    clearable
                    style="width: 135px; margin-right:8px"
                    @update-value="queryListOption3"
                  />
                  <NSelect
                    :options="listOption3"
                    v-model:value="form.provideId3"
                    placeholder="请选择位置"
                    clearable
                    style="width: 135px; margin-right: 8px"
                    @update-value="queryListOption4"
                  />
                  <NSelect
                    :options="listOption4"
                    v-model:value="form.provideId4"
                    placeholder="请选择位置"
                    clearable
                    style="width: 135px; margin-right: 8px"
                    @update-value="queryListOption5"
                  />
                  <NSelect
                    :options="listOption5"
                    v-model:value="form.provideId5"
                    placeholder="请选择位置"
                    clearable
                    style="width: 135px; margin-right: 8px"
                    @update-value="queryListOption6"
                  />
                  <NSelect
                    :options="listOption6"
                    v-model:value="form.provideId6"
                    placeholder="请选择位置"
                    clearable
                    style="width: 135px"
                    @update-value="queryListOption7"
                  />
                </NFormItem>
              </NSpace>
                <div class="tip" v-if="!form.provideId1">如不选，默认为第一层</div>
                <NSpace>
                  <NFormItem
                    label="库房位置名称:"
                    path="positionName"
                  >
                    <NInput
                      v-model:value="formValue.positionName"
                      placeholder="输入库房位置名称"
                      style="width: 300px; margin-right: 90px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="上级库房位置名称:"
                    path="parentPositionName"
                  >
                    <NInput
                      v-model:value="formValue.parentPositionName"
                      placeholder="输入上级库房位置名称"
                      style="width: 300px"
                    />
                  </NFormItem>
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="责任人:"
                    path="mainPerson"
                  >
                    <NInput
                      v-model:value="formValue.mainPerson"
                      placeholder="输入责任人"
                      style="width: 300px; margin-right: 90px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="库房位置描述:"
                    path="positionNameDesc"
                  >
                    <NInput
                      v-model:value="formValue.positionNameDesc"
                      placeholder="输入库房位置描述"
                      style="width: 300px"
                    />
                  </NFormItem>
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="备注:"
                    path="clueName"
                  >
                    <NInput
                      v-model:value="formValue.notes"
                      placeholder="输入备注"
                      style="width: 850px"
                      type="textarea"
                      :autosize="{
                        minRows: 5,
                        maxRows: 15
                      }"
                    />
                  </NFormItem>
                </NSpace>
              </NForm>
            </NSpace>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        取消
      </NButton>
      <NButton
        type="primary"
        style="width: 78px"
        @click="confirm"
        :disabled="loading"
        :loading="loading"
      >
        保存
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, watch } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  useMessage,
  NSpin
} from 'naive-ui'
import type { FormInst } from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import { keysOf } from '@/utils/object'
import type { HttpResponse } from '@/utils/http'
const route = useRoute()
const tags = useTagStore().tags
const message = useMessage()
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const listOption1 = ref([])
const listOption2 = ref([])
const listOption3 = ref([])
const listOption4 = ref([])
const listOption5 = ref([])
const listOption6 = ref([])
const formValue = reactive({
  positionName: null,
  parentPositionName: null,
  mainPerson: null,
  notes: null,
  positionNameDesc: null,
  parentId: null,
  fullPathId: null
})
const form = reactive({
  provideId1: null,
  provideId2: null,
  provideId3: null,
  provideId4: null,
  provideId5: null,
  provideId6: null
})
const rules = {
  positionName: {
    required: true,
    trigger: ['input','blur','change'],
    validator:(_:any,value:any)=>{
      if(!value) return new Error('请输入库房位置名称')
      if(value.length>100) return new Error('库房位置名称字数不得超过100')
      return true
    }
  },
  parentPositionName: {
    required: true,
    trigger: ['input','blur','change'],
    validator:(_:any,value:any)=>{
      if(!value) return new Error('请输入上级库房位置名称')
      if(value.length>100) return new Error('上级库房位置名称字数不得超过100')
      return true
    }
  },
  mainPerson: {
    required: true,
    trigger: ['input','blur','change'],
    validator:(_:any,value:any)=>{
      if(!value) return new Error('请输入责任人')
      if(value.length>10) return new Error('责任人字数不得超过10')
      return true
    }
  },
  positionNameDesc: {
    required: true,
    trigger: ['input','blur','change'],
    validator:(_:any,value:any)=>{
      if(!value) return new Error('请输入库房位置描述')
      if(value.length>100) return new Error('库房位置描述字数不得超过100')
      return true
    }
  }
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  
    tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
//层级下拉
const queryListOption1 = async (v: any) => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseStoreroomConfig',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: v
      }
    }
  })
  if (error) return message.error(error.message)
  listOption1.value = res.data
  formValue.parentId = v
}
const queryListOption2 = async (v: any) => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseStoreroomConfig',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: v
      }
    }
  })
  if (error) return message.error(error.message)
  listOption2.value = res.data
  formValue.parentId = v
}
const queryListOption3 = async (v: any) => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseStoreroomConfig',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: v
      }
    }
  })
  if (error) return message.error(error.message)
  listOption3.value = res.data
  formValue.parentId = v
}
const queryListOption4 = async (v: any) => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseStoreroomConfig',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: v
      }
    }
  })
  if (error) return message.error(error.message)
  listOption4.value = res.data
  formValue.parentId = v
}
const queryListOption5 = async (v: any) => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseStoreroomConfig',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: v
      }
    }
  })
  if (error) return message.error(error.message)
  listOption5.value = res.data
  formValue.parentId = v
}
const queryListOption6 = async (v: any) => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseStoreroomConfig',
    api: 'listOptionsByParentId',
    override: {
      params: {
        parentId: v
      }
    }
  })
  if (error) return message.error(error.message)
  listOption6.value = res.data
  formValue.parentId = v
}
const queryListOption7 = (v: any) => {
  formValue.parentId = v
}
//修改
const confirm = () => {
  formRef.value?.validate(async (err: any) => {
    if (err) return
    loading.value = true
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'baseStoreroomConfig',
      api: 'update',
      override: {
        data: {
          ...formValue
        }
      }
    })
    loading.value = false
    if (error) return message.error(error.message)
    message.success(res.msg)
    goBack()
  })
}
// 获取详情
const spinShow = ref(false)
const getDispatchInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseStoreroomConfig',
    api: 'info',
    uri: {
      id: route.params.id as never
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  keysOf(res.data).forEach((e) => {
    // @ts-ignore
    formValue[e] = res.data[e]
  })
  // @ts-ignore
  formValue.fullPathId = formValue.fullPathId?.split(',')
   // @ts-ignore
  formValue.fullPathId=formValue.fullPathId?.slice(0,formValue.fullPathId.length-1)
  console.log(formValue.fullPathId)
   // @ts-ignore
  formValue.fullPathId?.forEach((e, index) => {
    if (index === 0) {
      form.provideId1 = e
      queryListOption2(e)
    }
    if (index === 1) {
      form.provideId2 = e
      queryListOption3(e)
    }
    if (index === 2) { 
      form.provideId3 = e
      queryListOption4(e)
    }
    if (index === 3) {
      form.provideId4 = e
      queryListOption5(e)
    }
    if (index === 4) {
      form.provideId5 = e
      queryListOption6(e)
    }
    if (index === 5) {
      formValue.parentId = e
    }
  })
  spinShow.value = false
}
watch(
  () => route,
  () => {
    if (route.name == 'StoreroomEdit') {
      getDispatchInfo()
    }
  },
  { deep: true, immediate: true }
)
onMounted(() => {
  queryListOption1('0')
})
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        width: 360rem;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
      }
    }
  }
}
.tip{
  color: red;
  font-size: 12px;
  margin-top: -20rem;
  margin-left: 150px;
}
.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
